
<template>
  <div class="integral-detail">
    <!-- 标题-->
    <div class="title">
      <h3>我的积分</h3>
      <span>积分明细</span>
    </div>

    <div class="integral-list">
      <div class="integral">
        <p>0.00<span>积分</span></p>
        <i>排行榜</i>
      </div>
      <div class="tips">
        <p>积分攻略</p>
      </div>
    </div>

    <!-- 信息-->
    <div class="strategy">
      <div class="task">
        <div class="img">
          <img src="http://ktv.guagua.cn/group1/M01/0E/5F/PZvEFVzriC6AZqA_AAAr-69gD00778.jpg">
        </div>
        <div class="info">
          <p>签到<span>去签到</span></p>
          <i>每天签到挣积分</i>
          <i>连续签到0天，奖励0积分</i>
        </div>
      </div>
      <div class="task">
        <div class="img">
          <img src="http://ktv.guagua.cn/group1/M01/0E/5F/PZvEFVzriC6AZqA_AAAr-69gD00778.jpg">
        </div>
        <div class="info">
          <p>观看课程<span>看课程</span></p>
          <i>收听音频可以获取积分，观看视频可以换得50积分，积分数据根据观看时间来决定，不满一分不计算</i>
        </div>
      </div>
      <div class="task">
        <div class="img">
          <img src="http://ktv.guagua.cn/group1/M01/0E/5F/PZvEFVzriC6AZqA_AAAr-69gD00778.jpg">
        </div>
        <div class="info">
          <p>转发分享<span>去分享</span></p>
          <i>收听音频可以获取积分，观看视频可以换得50积分，积分数据根据观看时间来决定，不满一分不计算</i>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import nError from './../tpl/error'
  import menuTpl from './../tpl/menuTpl'
  export default {
    data(){
      return{}
    },
    created(){

    },
    methods:{
    },
    components:{
    }

  }
</script>

<style scoped lang="scss">
  .integral-detail{
    width: 100%;
    height: 100%;

    /* 标题*/
    .title{
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;

      h3{
        font-size: .52rem;
        padding: .4rem 0;
        text-align: center;
      }
      span{
        position: absolute;
        right: .3rem;
      }
    }

    /* 积分*/
    .integral-list{
      background: #fff;

      .integral{
        padding: .5rem 0;
        border-top: #dee3de solid 1px;
        border-bottom: #dee3de solid 1px;
        background: #ffeac7;
        text-align: center;
        color: #fff;

        p{
          font-size: .52rem;
          font-weight: bolder;

          span{
            margin-left: .3rem;
            font-size: .45rem;
            font-weight: normal;
          }
        }

        i{
          margin: 0 auto;
          margin-top: .3rem;
          width: 30%;
          padding: .15rem .3rem;
          display: block;
          border: #fff solid 1px;
          border-radius: .3rem;
          font-size: .45rem;
          font-style: normal;
        }
      }

      .tips{
        p{
          padding: .5rem;
          font-size: .48rem;
        }
      }
    }

    /* 攻略*/
    .strategy{
      margin-top: .25rem;
      background: #fff;

      .task{
        padding: .5rem;
        display: flex;
        align-items: center;
        -webkit-align-items: center;

        .img{
          margin-right: .2rem;
          width: 1.8rem;
          height: 1.8rem;

          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .info{
          flex: 1;

          p{
            margin-bottom: .2rem;
            font-size: .5rem;
            display: flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: space-between;
            -webkit-justify-content: space-between;

            span{
              padding: .1rem .5rem;
              background: #ffeac7;
              border-radius: .1rem;
              border: #969896 solid 1px;
              font-size: .36rem;
            }
          }

          i{
            display: block;
            font-style: normal;
            font-size: .36rem;
            color: #969896;
          }
        }
      }
    }

  }
</style>
